iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 7
0
自我挑戰組

Angular2學習筆記系列 第 7

Angular2 實戰番外篇-MEAN Stack (下)

  • 分享至 

  • xImage
  •  

前情提要:Angular2 的模組化 (番外篇-MEAN Stack 上集)

上集把環境都建置好了,接下來就可以開始打造Restful API

使用Mongoose建置API Model

我們先建立一個models的資料夾,用來放置所有Model的Schema。

在這個Lala Travel的專案,我希望可以提供二種服務,一個是旅遊行程(Tour),一個是票卷(Ticket),所以我們先來建立Tour的Model

mkdir models

touch models/Tour.js

在 models/Tour.js 設置Tour Model的Schema

var mongoose = require('mongoose');
var TourSchema = new mongoose.Schema({
  name: String, 
  imgurl: String,
  location: String,
  price: Number,
  rating: Number,
});
module.exports = mongoose.model('Tour', TourSchema);

設定Express.js的Route

我們希望使用下面的Restful API樣式來操作Tour Model的資料

Resource(URI) POST(新增) GET(檢視 ) PUT(修改) DELETE(刪除)
/tours 單筆新增行程 行程列表 X X
/tours/:id X 單筆檢視行程 修改行程 單筆刪除行程

首先我們先建立tours的route檔案

touch routes/tours.js

在app.js中加上tours的route設定

var tours = require('./routes/tours');
app.use('/tours', tours);

接下來我們可以用mongoose的API來操作 Tour Model

Query

  • Model.find(conditions, [fields], [options], [callback])
  • Model.findById(id, [fields], [options], [callback])
  • Model.findOne(conditions, [fields], [options], [callback])

Create

  • Model.create(conditions,[callback])

Update

  • Model.update(conditions, update, [options], [callback])
  • Model.findByIdAndUpdate(id, [update], [options], [callback])
  • Model.findOneAndUpdate([conditions], [update], [options], [callback])

Remove

  • Model.remove(conditions, [callback])
  • Model.findByIdAndRemove(id, [options], [callback])
  • Model.findOneAndRemove(conditions, [options], [callback])

行程列表: GET /tours

in routes/tours.js

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Tour = require('../models/Tour.js');

/* GET /tours 行程列表 */

router.get('/', function(req, res, next) {
  Tour.find(function (err, todos) {
    if (err) return next(err);
    res.json(Tour);
  });
});
module.exports = router;

我們可以在terminal用以下的指令打列表的API,由於還沒新增任何資料,所以回傳一個空陣列

curl localhost:3000/tours
# => []%

單筆新增新程: POST /tours

in routes/tours.js

/* POST /tours 單筆新增行程 */
router.post('/', function(req, res, next) {
  Tour.create(req.body, function (err, post) {
    if (err) return next(err);
    res.json(post);
  });
});

使用Postman成功的建立一筆行程

使用Postman利用GET localhost:3000/tours可查詢出剛剛建立的資料

單筆檢視行程: GET /tours/:id

in routes/tours.js

/* GET /tours/id 單筆檢視行程 */
router.get('/:id', function(req, res, next) {
  Tour.findById(req.params.id, function (err, post) {
    if (err) return next(err);
    res.json(post);
  });
});

單筆修改行程: PUT /tours/:id

in routes/tours.js

/* PUT /tours/:id 單筆修改行程 */
router.put('/:id', function(req, res, next) {
  Tour.findByIdAndUpdate(req.params.id, req.body, function (err, post) {
    if (err) return next(err);
    res.json(post);
  });
});

使用Postman成功的修改一筆行程

使用Postman利用GET localhost:3000/tours/:id可查詢出剛剛建立的資料

單筆刪除行程: DELETE /tours/:id

in routes/tours.js

/* DELETE /todos/:id 單筆刪除行程 */
router.delete('/:id', function(req, res, next) {
  Tour.findByIdAndRemove(req.params.id, req.body, function (err, post) {
    if (err) return next(err);
    res.json(post);
  });
});

使用Postman先新增一筆測試資料

再使用Postman成功刪除指定的單筆行程資料

這樣就建立好符合Restful風格的API了。

提供今天的 Github 專案進度檔案


上一篇
Angular2 實戰番外篇-MEAN Stack (上)
下一篇
Angular 2.3 支援 Component Inheritance 學習筆記
系列文
Angular2學習筆記19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言